<template>
  <div class="app-container home">
      <div id="main" style='width:100%;height: 75vh'></div>
  </div>
</template>

<script>
export default {
  name: "TestIndex",
  data(){
    return{
      wsUrl: 'ws://127.0.0.1:8080/test/oneToMany', // ws地址
      websock: null, // ws实例,
      option : {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      }
    }
  },methods:{
    initEchart(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'));
      // 绘制图表
      myChart.setOption(this.option);
    },// 初始化weosocket
    initWebSocket() {
      if (typeof WebSocket === 'undefined')
        return console.log('您的浏览器不支持websocket')
      this.websock = new WebSocket(this.wsUrl)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },
    websocketonopen() {
      // 连接建立之后执行send方法发送数据
      let actions = { test: 'test' }
      this.websocketsend(JSON.stringify(actions))
    },
    websocketonerror() {
      // 连接建立失败重连
      this.initWebSocket()
    },
    websocketonmessage(e) {
      // 数据接收
      const redata = e.data
      console.log('接收的数据', redata)//d
      if(this.option.series[0].data.length==24){
        this.option.series[0].data.shift() //删除第一个元素
      }
      if(this.option.xAxis.data.length==24){
        this.option.xAxis.data.shift();
      }
      this.option.xAxis.data.push(this.getCurrentTime())
      this.option.series[0].data.push(redata) //往图形报表中的数组添加元素
      this.initEchart();
    },
    websocketsend(Data) {
      // 数据发送
      this.websock.send(Data)
    },
    websocketclose(e) {
      // 关闭
      console.log('断开连接', e)
    },
    getCurrentTime() {
      var date = new Date();//当前时间
      var year = date.getFullYear() //返回指定日期的年份
      var month = this.repair(date.getMonth() + 1);//月
      var day = this.repair(date.getDate());//日
      var hour = this.repair(date.getHours());//时
      var minute = this.repair(date.getMinutes());//分
      var second = this.repair(date.getSeconds());//秒

      //当前时间
      var curTime = year + "-" + month + "-" + day
        + " " + hour + ":" + minute + ":" + second;
      return curTime;
    }

//补0
    ,
    repair(i){
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    }



  },mounted() {
    this.initWebSocket();//初始化websocket
    this.initEchart();
  }, destroyed() {
    // 离开路由之后断开websocket连接
    this.websock.close()
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
